let rate = 1;
const checkHttps = (url) => {
    return url.substr(0, 7).toLowerCase() == "http://"
        ? url.replace("http://", "https://")
        : url;
};
let starimg = `<image class="star-icon1" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-star-active.png"/>`;
let unstarimg = `<image class="star-icon1" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-star.png"/>`;
let smallstarimg = `<image class="star-icon2" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-star-active.png"/>`;
let smallunstarimg = `<image class="star-icon2" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-star.png"/>`;
let formatStar1 = (num) => {
    num = parseInt(num);
    let star = num;
    let unstar = 5 - num;
    return `
  <view class="star-wrap1">
    ${starimg.repeat(star)}
    ${unstarimg.repeat(unstar)}
  </view>    
  `;
};
let formatStar2 = (num) => {
    num = parseInt(num);
    let star = num;
    let unstar = 5 - num;
    return `
  <view class="star-wrap2">
    ${smallstarimg.repeat(star)}
    ${smallunstarimg.repeat(unstar)}
  </view>    
  `;
};
let getStarName = (starNum) => {
    var SATISFACTIONS = ['', '非常差', '差', '一般', '满意', '超赞'];
    // console.log("starNum",starNum)
    starNum = parseInt(starNum);
    // console.log("starNum",starNum)
    // console.log("name", SATISFACTIONS[starNum])
    // 满意度列表
    return SATISFACTIONS[starNum];
}
const transformWidthrpx = (screenWidth, widthrpx) => {
    return Math.floor(screenWidth * widthrpx / 750)
}
// 高度 过高会报错
const renderShareTopCard = ({ theme, banben, xin, using_date, pcu, hotel_name, status }) => {
    // const systemInfo = wx.getSystemInfoSync();
    const style = {
        weddingInfo: {
            width: 350,
            height: 170,
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-start",
            justifyContent: "flex-start",
            backgroundColor: "#ffffff",
            marginLeft: 11,
            marginRight: 11,
            marginTop: 16,
            borderRadius: 10,
            position: "relative"
        },
        infoPart1: {
            width: 330,
            height: 35,
            marginTop: 18,
            marginLeft: 17,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between"
        },
        titleText: {
            width: 270,
            height: 35,
            fontSize: 20,
            fontFamily: "PingFang SC, PingFang SC-500",
            fontWeight: 500,
            textAlign: "left",
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "flex-start",
            color: "#333333",
        },
        wedBanbenWrap: {
            width: 50,
            height: 19,
            marginRight:10,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "flex-start"
        },
        wedIcon: {
            width: 18,
            height: 18,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: 5,
        },
        wedIconWrap: {
            width: 18,
            height: 19,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center"
        },
        banbenText: {
            width: 41,
            height: 19,
            marginLeft: 2,
            fontSize: 10,
            fontFamily: "PingFang SC, PingFang SC-400",
            textAlign: "left",
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "flex-start",
            color: "rgb(237, 61, 8)"
        },
        infoPart2: {
            width: 330,
            height: 28,
            marginTop: 9,
            marginLeft: 17,
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        estimateTextWrap: {
            width: 80,
            height: 28,
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        estimateText1: {
            width: 45,
            height: 28,
            fontSize: 15,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: "400",
            textAlign: "left",
            color: "#333333",
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        estimateText2: {
            width: 35,
            height: 28,
            fontSize: 15,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: "400",
            alignItems: "center",
            textAlign: "left",
            color: "#ee4c1e",
            display: "flex",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        estimateStarsWrap: {
            width: 120,
            height: 28,
            marginLeft: 6,
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        estimateText3: {
            width: 50,
            height: 28,
            marginLeft: 10,
            paddingTop: 4,
            fontSize: 11,
            fontFamily: "PingFang SC, PingFang SC-400",
            textAlign: "left",
            color: "#ff8d19",
            display: "flex",
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "flex-start",
        },
        starWrap1: {
            width: 120,
            height: 24,
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        starIcon1: {
            width: 18,
            height: 18,
            marginRight: 6
        },
        infoPart3: {
            width: 330,
            height: 20,
            marginTop: 13,
            marginLeft: 17,
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        jiabinText: {
            width: 100,
            height: 20,
            fontSize: 10,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: 400,
            textAlign: "left",
            color: "rgba(0, 0, 0, 0.40)",
        },
        dateText: {
            width: 120,
            height: 20,
            marginLeft: 20,
            fontSize: 10,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: 400,
            textAlign: "left",
            color: "rgba(0, 0, 0, 0.40)",
        },
        infoPart4: {
            width: 330,
            height: 20,
            marginTop: 9,
            marginLeft: 17,
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        locationIconWrap: {
            width: 16,
            height: 20,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },
        locationIcon: {
            width: 16,
            height: 16,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },
        addressText: {
            width: 100,
            height: 20,
            fontSize: 12,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: 400,
            textAlign: "left",
            color: "rgba(0, 0, 0, 0.40)",
        },
        infoStatus: {
            width: 55,
            height: 25,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            position: "absolute",
            bottom: 20,
            right: 0,
            backgroundColor: "#d9d9d9",
            borderRadius: 0,
        },
        statusText: {
            width: 50,
            height: 20,
            marginTop: 6,
            fontSize: 10,
            fontFamily: "PingFang SC, PingFang SC-400",
            fontWeight: 400,
            textAlign: "center",
            display: "flex",
            alignItems: "center",
            flexDirection: "row",
            color: "#fff",
        },
    };
    const wxml = `
<view class="wedding-info" >
    <view class="info-part1">
        <text class="title-text">${handleThemename(theme)}</text>
        <view class="wed-banben-wrap">
            <view class="wed-icon-wrap">
                <image class="wed-icon" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-wed.png"></image>
            </view>
            <text class="banben-text">${banben}</text>
        </view>
    </view>   
    <view class="info-part2">
        <view class="estimate-text-wrap">
            <text class="estimate-text1">评分：</text>
            <text class="estimate-text2">${xin || 0}</text>
        </view>
        <view class="estimate-stars-wrap">${formatStar1(xin)}</view>
        <text class="estimate-text3">${getStarName(xin)}</text>
    </view>  
    <view class="info-part3">
        <text class="jiabin-text">${(pcu || 0) + "位嘉宾"}</text>
        <text class="date-text">${using_date}</text>
    </view>
    <view class="info-part4">
        <view class="location-icon-wrap"><image class="location-icon" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-location.png"></image></view>
        <text class="address-text">${hotel_name}</text>
    </view>
    <view class="info-status">
        <text class="status-text">已礼成</text>
    </view>
</view>
    `
    return {
        wxml,
        style,
    };
};

const renderCommentCard = ({ comments, commentCount, reserveCount, awardCount }) => {
    const style = {
        commentCard: {
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "flex-start",
            flexDirection: "column",
            width: 350,
            height: 380,
            borderRadius: 10,
            position: "relative",
            marginTop: 10,
            marginLeft: 11,
            backgroundColor: "#ffffff"
        },
        commentHeader: {
            width: 330,
            height: 45,
            display: "flex",
            flexDirection: "row",
        },
        tabItem1: {
            width: 110,
            height: 45,
            fontSize: 13,
            fontFamily: "PingFang SC, PingFang SC-400",
            color: "#000",
            textAlign: "center",
            lineHeight: 45
        },
        tabItem2: {
            width: 110,
            height: 45,
            fontSize: 13,
            fontFamily: "PingFang SC, PingFang SC-400",
            color: "rgba(0, 0, 0, 0.6)",
            textAlign: "center",
            lineHeight: 45
        },
        tabItem3: {
            width: 110,
            height: 45,
            fontSize: 13,
            fontFamily: "PingFang SC, PingFang SC-400",
            color: "rgba(0, 0, 0, 0.6)",
            textAlign: "center",
            lineHeight: 45
        },
        divider: {
            width: 350,
            height: 1,
            backgroundColor: "#eee",
        },
        commentItem: {
            width: 330,
            height: 105,
            display: "flex",
            justifyContent: "center",
            alignItems: "flex-start",
            flexDirection: "column",
            position: "relative",
            paddingTop: 17,
            paddingBottom: 17,
            paddingLeft: 17,
            paddingRight: 11
        },
        sectorA: {
            width: 330,
            height: 55,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },
        headimg: {
            width: 35,
            height: 35,
            borderRadius: 17,
        },
        descWrap: {
            width: 140,
            height: 35,
            display: "flex",
            justifyContent: "center",
            alignItems: "flex-start",
            flexDirection: "column",
            marginLeft: 10,
        },
        descName: {
            width: 140,
            height: 22,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },
        descNameText: {
            width: 140,
            height: 22,
            fontSize: 12,
            fontFamily: "PingFang SC, PingFang SC-400",
            textAlign: "left",
            color: "#000000",
        },
        starWrap2: {
            width: 75,
            height: 13,
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        starIcon2: {
            width: 13,
            height: 13,
            marginRight: 2
        },
        commentStarWrap: {
            width: 140,
            height: 13,
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "flex-start",
            flexDirection: "row",
        },
        commentStarText: {
            width: 40,
            height: 13,
            marginLeft: 10,
            // paddingTop: 4,
            fontSize: 9,
            fontFamily: "PingFang SC, PingFang SC-400",
            textAlign: "left",
            color: "#ff8d19",
            display: "flex",
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "flex-start",
        },
        replyTime: {
            width: 120,
            height: 14,
            marginLeft: 40,
            fontFamily: "PingFang SC, PingFang SC-400",
            color: "rgb(0, 0, 0, 0.6)",
            fontSize: 10,
        },
        sectorB: {
            width: 330,
            height: 45,
            marginTop:10,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },
        sectorBContent: {
            width: 330,
            height: 67,
            fontSize: 12,
            color: "#333333",
        },
        commentDivider: {
            width: 320,
            height: 2,
            marginLeft: 0,
            marginRight: 5,
            backgroundColor: "#eee",
        }
    }

    let commentlist = "";
    if (comments) {
        let len = comments.length > 3 ? 3 : comments.length;
        for (let i = 0; i < len; i++) {
            commentlist += `
<view class="comment-item"> 
      <view class="sector-a">
        <image class="headimg" src="${checkHttps(comments[i].avatar)}"></image>
        <view class="desc-wrap">
            <view class="desc-wrap">
                <view class="desc-name"><text class="desc-name-text">${handleNickname(comments[i].nickname)}</text></view>
                <view class="comment-star-wrap">
                    ${formatStar2(comments[i].satisfaction)}
                    <text class="comment-star-text">${getStarName(comments[i].satisfaction)}</text>
                </view>
            </view>
        </view>
        <text class="reply-time">${comments[i].time}</text>
      </view>
      <view class="sector-b">
        <text class="sector-b-content">
        ${comments[i].content}
        </text>
      </view>
      <view class="comment-divider"></view>
</view>
    `;
        }
    }
    const wxml = `
<view class="comment-card">
    <view class="comment-header">
      <text class="tab-item1">${"评价(" + commentCount + ")"}</text>
      <text class="tab-item2">${"打赏(" + awardCount + ")"}</text>
      <text class="tab-item3">${"预定(" + reserveCount + ")"}</text>
    </view>
    <view class="divider"></view>
    ${commentlist}
</view>
    `
    return {
        wxml,
        style,
    };
}

const getDataNew = (obj) => {
    obj.avator = checkHttps(obj.avator);
    obj.qrcode = checkHttps(obj.qrcode);

    let qrcode = obj.qrcode;

    return `
  <view class="container comment" >
    <image class="bg" src="https://ustatic.hudongmiao.com/joymew-assistant/estimate-new/comment-bg.png"></image>
    ${renderShareTopCard(obj).wxml}
    ${renderCommentCard(obj).wxml}
    <image class="qrcode" src="${qrcode}"></image>
    <text class="scan-tips">
      长按图片查看更多精彩的评论
    </text>
  </view>
  `;
};
const getStyle = () => {
    const systemInfo = wx.getSystemInfoSync();
    console.log("systemInfo", systemInfo)
    return {
        "comment": {
            marginTop: 20,
            width: 430,
            height: 950,
            backgroundColor: "#6495ED",
            position: "relative",
        },
        bg: {
            width: 430,
            height: 950,
            position: "absolute",
            top: 0,
            left: 0
        },
        qrcode: {
            marginTop: 11,
            width: 127,
            height: 127,
            marginLeft:130,
        },
        scanTips: {
            marginTop: 10 ,
            marginLeft: 120,
            width: 143 ,
            height: 16 ,
            fontSize: 11 ,
            color: "#999999",
            textAlign: "center",
        },
        ...renderShareTopCard({}).style,
        ...renderCommentCard({}).style,
    };
}

/**
 * 处理昵称超过指定字数截取+省略号
 */
const handleNickname = (nickname,len = 10) => {
    return nickname.length > len ? nickname.substr(0,len) + "..." : nickname;
}
const handleThemename = (theme,len = 10) => {
    if (theme)
        return theme.length > len ? theme.substr(0,len) + "..." : theme;
    else
        return "";
}


module.exports = {
    getDataNew,
    getStyle,
};
